<template>
	<view>
		<uv-popup ref="popup" mode="bottom" @maskClick="close" zIndex="99" :round="20" :safeAreaInsetBottom="false">

			<view class="payPopupBox">
				<view class="payPopupHeader">
					收银台
				</view>

				<view class="payAmount">
					<view class="payAmountText">
						待支付金额:
					</view>
					<view class="amount">
						<uv-count-to :start-val="0" :decimals="2" :end-val="payAmount" color="#e11514" :duration="1000"
							:useEasing="false"></uv-count-to>
					</view>
				</view>

				<view class="payMethod">
					<!-- <view class="pay" @tap="H5Pay('wechatpay')">
						<view class="payLeft">
							<image src='/static/img/wxPay.svg' mode="scaleToFill"></image>
							<view class="payText">
								微信支付
							</view>
						</view>
						<uv-icon name="arrow-right" color="#909193" size="28rpx"></uv-icon>
					</view> -->
					<view class="pay" @tap="H5Pay('alipay')">
						<view class="payLeft">
							<image src='/static/img/zfbPay.svg' mode="scaleToFill"></image>
							<view class="payText">
								支付宝支付
							</view>
						</view>
						<uv-icon name="arrow-right" color="#909193" size="28rpx"></uv-icon>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-toast ref="toastRef" />
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	import config from '@/utils/config.js';
	const returnUrl = config.returnUrl
	const app = getApp()
	const load = ref(true)
	const popup = ref(null);
	const payAmount = ref(null)
	const order_no = ref(null)
	const expact = ref(null)
	const toastRef = ref(null)
	const showToast = (message, type = 'default') => {
		toastRef.value?.show({
			type,
			message
		})
	}
	const open = (reqexpact, reqprice, reqorder_no) => {
		expact.value
		payAmount.value = reqprice
		order_no.value = reqorder_no
		expact.value = reqexpact
		popup.value.open()
	}
	const close = () => {
		app.vibrate()
		popup.value.close()
	};
	const H5Pay = (pay_type) => {
		// showToast("暂未实现此功能")
		// return false;
		let req = {
			pay_type,
			order_no: order_no.value,
			expact: expact.value,
			return_url: returnUrl + "/#"
		}
		console.log(req)
		app.post('api.auth.order/payMonthPays', req).then(res => {
			window.location.href = res
		})
	}
	// 输出组件的方法，让外部组件可以调用
	defineExpose({
		open,
	})
</script>
<style lang="scss" scoped>
	.payPopupBox {
		background: #f3f3f3;
		padding-bottom: 400rpx;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 0 0;

		.payPopupHeader {
			text-align: center;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			font-weight: bold;
			background: #fff;
			border-radius: 32rpx 32rpx 0 0;
		}

		.payAmount {
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.payAmountText {
				font-size: 28rpx;
				margin-bottom: 16rpx;
			}

			.amount {
				font-size: 52rpx;
				color: #e11514;
			}
		}

		.payMethod {
			.pay {
				height: 80rpx;
				display: flex;
				background: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 2rpx;

				.payLeft {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					image {
						width: 42rpx;
						height: 42rpx;
						margin-right: 24rpx;
					}
				}
			}
		}
	}
</style>